<script lang="ts" setup>
import { stepDataEntity } from '@/api/operation/types/operation'
import { ref } from 'vue'

const dialogVisible = ref<boolean>(false)
const title = ref<string>('工单备注')
const workOrderId = ref<string>('')
const data = ref<stepDataEntity[]>([])
defineProps<{
  type: string
}>()
const open = () => {
  dialogVisible.value = true
}
const setData = async (
  id: string,
  t: string,
  callback: (workOrderId: string, title: string) => Promise<stepDataEntity[]>
) => {
  workOrderId.value = id
  title.value = t
  data.value = await callback(workOrderId.value, title.value)
}
defineExpose({ open, setData })
</script>

<template>
  <el-dialog :title="title" v-model="dialogVisible" width="600px">
    <el-steps direction="vertical" align-center v-if="type !== 'image'">
      <el-step
        v-for="(step, index) in data"
        :key="index"
        :status="index === data.length - 1 ? 'finish' : 'wait'"
      >
        <template #title>
          <span>{{ step.createdTime }}</span>
          <span ml-10>{{ step.operator }}</span>
        </template>
        <template #description>
          <span>{{ step.title }}</span>
        </template>
      </el-step>
    </el-steps>
    <el-steps direction="vertical" align-center v-else>
      <el-step v-for="(step, index) in data" :key="index" status="wait">
        <template #title>
          <span>{{ step.title }}</span>
        </template>
        <template #description>
          <div class="container">
            <el-image
              v-if="step.imageUrls"
              :src="step.imageUrls ? step.imageUrls : ''"
              :preview-src-list="step.imageUrls ? step.imageUrls.split(',') : []"
            />
            <div class="container__info">
              <span>操作人:{{ step.operator }}</span>
              <span>操作时间:{{ step.createdTime }}</span>
              <span>操作内容:{{ step.content }}</span>
            </div>
          </div>
        </template>
      </el-step>
    </el-steps>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-step__description) {
  min-height: 50px;
  padding-right: 0;
}
.container {
  display: flex;
  padding: 10px 15px;
  border: 1px solid var(--xy-light-color);
  align-items: center;
  .el-image {
    width: 100px;
    height: 100px;
  }
  &__info {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    line-height: 22px;
    margin-left: 10px;
  }
}
</style>
